<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
    <!-- h系列标签 ctrl+a/d左右选中 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <!-- p标签段落 -->
    <p>这是一个段落</p>

    换行<br>水平线
    <hr>

    <!-- strong ins em del 强调重要 -->
    <b>加粗</b> <strong>加粗</strong>
    <u>下划线</u> <ins>下划线</ins>
    <i>倾斜</i> <em>倾斜</em>
    <s>删除线</s> <del>删除线</del>

    <!-- ctrl + /这是注释，是对代码的解释说明 -->
    这个是网页的身体/主体

    <!-- 图片标签img   src + 路径  alt替换文本-->
    <!-- title提示文本 -->
    <!-- width和height属性只需要给出一个值,另一个等比例缩放 -->
    <img src="./wanxia.jpg" alt="这是晚霞" title="这是title文字,鼠标悬停的时候显示" width="200" height="200">

    <!-- ./是当前文件中  ../是上一个文件中 -->

    <!-- 音频标签audio   src + 路径  显示播放的控件controls -->
    <!-- 自动播放autoplay(部分浏览器不支持) 循环播放loop -->
    <audio src="./夏天的秘密.mp3" controls autoplay loop></audio>

    <!-- 视频标签video   src + 路径   显示播放的控件controls -->
    <!-- 自动播放autoplay(谷歌浏览器中需配合muted实现静音播放) 循环播放loop -->
    <video src="./相遇.mp4" controls autoplay muted></video>

    <!-- 链接标签a  跳转路径href -->
    <a href="https://www.baidu.com/">跳转到百度</a>
    <br>
    <a href="../基础学习.txt">跳转到基础学习</a>
    <br>
    <!-- 当开发网站初期，我们还不知道跳转地址的时候，href的值书写#(空连接) -->
    <a href="#">空链接还不知道跳到哪里</a>
    <!-- 网页的打开形式target 覆盖原网页_self 保留原网页_blank -->
    <br>
    <a href="https://www.baidu.com/" target="_blank">保留跳转</a>
    <br>
    <a href="https://www.baidu.com/" target="_self">覆盖跳转</a>

    <!-- 无序列表ul(ul标签中只允许包含li标签)  无序列表的每一行内容li -->
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>

    <!-- 有序列表ol(ul标签中只允许包含li标签)  有序列表的每一行内容li-->
    <ol>
        <li>张三:100</li>
        <li>李四:100</li>
    </ol>

    <!-- 自定义列表dl(自定义列表只允许包含dt/dd标签)  dt代表自定义列表的主题 dd代表自定义列表的每一行内容(dd前会默认显示缩进效果) -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
    <!-- alt+shift+F 代码格式化 -->
    <!-- 表格标签table 表格每行标签tr 表格单元格标签td -->
    <!-- 表格边框宽度border 表格宽度width 表格高度height -->
    <!-- 实际开发时针对于样式宽度,高度效果推荐用CSS设置 -->
    <table border="1" width="600" height="200">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>真好</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>真好</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>100</td>
            <td>100</td>
        </tr>

    </table>

    <!-- 表格标题标签caption(标签书写在table内部) -->
    <!-- 表头单元格标签th(标签书写在tr内部,用于替换td标签) -->
    <table border="1" width="600" height="200">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>真好</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>真好</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>100</td>
            <td>100</td>
        </tr>

    </table>

    <!-- 表格头部标签thead 表格主体标签tbody 表格底部标签tfoot -->
    <table border="1" width="600" height="200">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>真好</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>真好</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>

    <!-- 合并单元格标签垂直跨行合并rowspan 水平跨列合并colspan -->
    <!-- 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并不能跨:thead,tbody,tfoot -->
    <table border="1" width="600" height="200">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td rowspan="2">100分</td>
                <td>真好</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>真好</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>总结 </td>
                <td colspan="2">100</td>
            </tr>
        </tfoot>
    </table>

    <!-- input表单系列标签(标签可以通过type属性值的不同,展示不同的效果) -->
    <!-- type属性值包括 text文本框用于输入单行文本 password密码框用于输入密码 radio单选框用于多选一 checkbox多选框用于多选多 file文件选择用于之后上传文件 submit提交按钮用于提交 reset重置按钮用于重置 button普通按钮默认无功能之后配合js添加功能 -->

    <!-- 表单标签form +地址 -->
    <form action="地址">
        <!-- placeholder占位符号提示用户输入内容的文本 -->
        文本框: <input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密码框: <input type="password" placeholder="请输入密码">
        <br>
        <br>
        <!-- name分组(有相同name属性值的单选框为一组,一组只能选中一个) -->
        <!-- checked默认选中 -->
        单选框: <input type="radio">
        性别: <input type="radio" name="sex">男
        <input type="radio" name="sex" checked>女
        <br>
        <br>
        多选框: <input type="checkbox" checked>
        <br>
        <br>
        <!-- multiple多文件选择 -->
        上传文件: <input type="file" multiple>
        <br>
        <br>
        提交按钮： <input type="submit" value="免费注册">
        重置按钮： <input type="reset">
        <!-- value给按钮显示文字 -->
        普通按钮: <input type="button" value="普通按钮">
        <br>
        <!-- button按钮标签 type属性值(同input的按钮系列) -->
        <!-- button配合js使用 -->
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">普通按钮</button>

        <!-- select下拉菜单标签 option下拉菜单的每一项 -->
        <!-- selected下拉菜单的默认选中 -->
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option selected>深圳</option>
        </select>

        <!-- textarea文本域标签 cols规定文本域内可见宽度 rows规定文本域内可见行数 -->
        <!-- 右下角可以拖拽改变大小 -->
        <!-- 实际开发时针对于样式宽度,高度效果推荐用CSS设置 -->
        <textarea cols="60" rows="30"></textarea>

        <!-- label标签把内容包裹起来 -->
        性别:
        <input type="radio" name="sex" id="nan"><label for="nan"> 男</label>
        <label><input type="radio" name="sex"> 女</label>

        <!-- 没有语义化的布局标签 div一行只显示一个(独占一行) span一行可以显示多个 -->
        <div>这是div标签</div>
        <div>这是div标签</div>
        <span>这是span标签</span>
        <span>这是span标签</span>

        <!-- 有语义的布局标签(一般在手机网页中使用) header网页头部 nav网页导航 footer网页底部 aside网页侧边栏 section网页区块 article网页文章 -->
        <header>网页头部</header>
        <nav>网页导航</nav>
        <footer>网页底部</footer>
        <aside>网页侧边栏</aside>
        <section>网页区块</section>
        <article>网页文章</article>

        <!-- 字符实体   空格 &nbsp；-->
        123&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123



        






















</body>

</html>